<template>
        <div class="page">
          <div class="main">
        <el-form :model="loginData"  :rules="rules" label-width="auto" style="max-width: 600px" ref="ruleFormRef">
    <el-form-item   prop="phone">
      
      <el-input v-model="loginData.phone" placeholder="请输入您的手机号"/>
 
    </el-form-item>
    <el-form-item   prop="password">
      
       <el-input type="password" v-model="loginData.password" placeholder="请输入您的密码"/>

    </el-form-item>
    <el-form-item style="width: 100%;text-align: center;">
      <el-button  type="primary" @click="submitForm()">立即登录</el-button>
     </el-form-item>
  </el-form>
</div>

        </div>
       
   
</template>
<script lang="js" setup>
import { reactive,ref } from 'vue'
import  request from '../request'
import Vrouter from "@/router";
import store from '../stores/GlobalStore';

const ruleFormRef = ref(null);

// do not use same name with ref
const loginData = reactive({
  phone: '',
  password:''
});
const rules={
          phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
           ],
           password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
           ]
        };
 
 
  const submitForm=function(){
    ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
       console.log('submit!')
       console.log(loginData)

      //  const formData = new FormData();
      // formData.append('phone', loginData.phone);
      // formData.append('password', loginData.password);

       request  .post('app/user/login',loginData)
      .then(function (data){
           //成功
         let token=data;
         window.localStorage.setItem("user-token",token);
         store().token=token;
         Vrouter.push({path:"/"});

       
          console.log(data);
 
       })
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });

     } else {
      console.log('error submit!', fields)
    }
  })
  }
</script>
<style scoped>
.page{
  display: flex !important
;
    min-height: 100vh;
    align-items: center !important;
    justify-content: center !important;
 background-image: url(../assets/images/login-bg.jpg);  
 background-size: cover;

  }
  .el-button {
  margin: 0 auto;  
  width: 100%;        /* 如果使用 block 布局，这可以水平居中 */
}
</style>